<template>
	<cl-page background-color="#fff">
		<!-- #ifdef WEB -->
		<shareBtn />
		<!-- #endif -->
		<!--  :style="'height:calc(100vh - 120rpx - '+safeAreaInsets*2+'rpx)'" -->
		<view class="recipe" :style="'height:calc(100vh - '+safeAreaInsets+'rpx)'">
			<view class="recipe-search">
				<uv-search :disabled="true" :showAction="false" @click="toRecipeSearch"
					placeholder="搜索症状/身体部位/象数名称"></uv-search>
			</view>
			<view class="page-category">
				<view class="menu-a">
					<scroll-view scroll-y enable-flex class="scroller" :scroll-into-view="view" scroll-with-animation
						enable-back-to-top>
						<view class="item" v-for="(item, index) in list" :id="`group-${index}`" :key="index" :class="{
								'is-active group-activeB': index == active,
								'is-prev': index == active - 1,
								'is-next': index == active + 1,
							}" @tap="toView(index)">{{ item.name }}</view>

						<view class="flex1"></view>
					</scroll-view>
				</view>
				<view class="menu-b menu-border" v-if="children.length>0">
					<scroll-view scroll-y class="scroller" :scroll-into-view="viewB" scroll-with-animation
						enable-back-to-top>
						<view class="group" v-for="(group, index) in children" :key="group.id" :id="`group-${index}`"
							:class="activeB==index?'group-activeB':''" @click="toInfo(group,index)">
							<view class="list">
								<view class="item" style="font-size:30rpx" @click="showChildrenC(item,index)">
									{{group.name}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="menu-b" v-else style="font-size:30rpx">
					<rich-text :nodes="formatRichText(list[active].description)"></rich-text>
				</view>
				<view class="menu-b" v-if="childrenC.length>0">
					<scroll-view scroll-y class="scroller" :scroll-into-view="viewC" scroll-with-animation
						enable-back-to-top>
						<view class="group" :class="activeC==index?'group-activeB':''"
							v-for="(group, index) in childrenC" :key="index" :id="`group-${index}`">
							<view class="list" @click="toInfo(group,index)">
								<view class="item" style="font-size:30rpx">
									{{group.name}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- #ifndef WEB -->
		<!-- <Tabbar /> -->
		<!-- #endif -->
		<!-- 分享 -->
		<share ref="shareTrm" :href="'#/pages/index/recipe'" :title="'象数配方'" :summary="'【推荐】点击即可助念~经典象数配方、名家辩证参考方、验方……'"
			:imageUrl="config.tencentCloud+'/recipe-share.png'" />
		<!-- 分享按钮 -->
		<!-- #ifdef APP -->
		<sharePosition @shareTrms="shareTrms" />
		<!-- #endif -->
	</cl-page>
</template>

<script lang="ts" setup>
	import { deepTree, formatRichText } from "@/cool/utils";
	import { onPullDownRefresh, onShareAppMessage, onShow, onReady, onShareTimeline } from "@dcloudio/uni-app";
	import { tencentUrl } from "/@/cool/utils";
	import { useCool, useStore, useWx } from "/@/cool";
	import { reactive, ref, computed } from "vue";
	import { config } from "/@/config";
	import { useUi } from "/$/cool-ui";
	// import Tabbar from "./components/tabbar.vue";
	import shareBtn from "/@/components/share/share-btn.vue"
	import sharePosition from "/@/components/share/share-position.vue"
	import share from "/@/components/share/share.vue"
	const { router, service } = useCool();
	const { user } = useStore();
	const ui = useUi();
	const wx = useWx();
	const list = ref([])
	const active = ref(0)
	const activeB = ref(0)
	const activeC = ref(null)
	const view = ref("")
	const viewB = ref("")
	const viewC = ref("")
	const children = ref([{}])
	const childrenC = ref([])
	const shareTrm = ref()
	const safeAreaInsets = ref(0)
	onPullDownRefresh(async () => {
		getList()
	});
	onShareAppMessage(() => {
		return {
			path: "/pages/index/recipe",
			title: "借天地能量，助身心健康！象数疗法有缘人共享~",
			imageUrl: "https://image-apk-1310343798.cos.ap-nanjing.myqcloud.com/common_option/wechat_option/share.jpg"
		}
	})
	onShareTimeline(() => {
		return {
			path: "/pages/index/recipe",
			title: "借天地能量，助身心健康！象数疗法有缘人共享~",
			imageUrl: "https://image-apk-1310343798.cos.ap-nanjing.myqcloud.com/common_option/wechat_option/share.jpg"
		}
	})
	function shareTrms() {
		shareTrm.value.open()
	}
	function getList() {
		ui.showLoading("加载中")
		service.broadcast.recipe.list({ order: "topping" }).then(res => {
			if (res.length > 0) {
				list.value = deepTree(res)
				if (list.value[active.value].children) {
					children.value = list.value[active.value].children
					if (list.value[active.value].children[activeB.value].children) {
						childrenC.value = list.value[active.value].children[activeB.value].children
					} else {
						childrenC.value = []
					}
				} else {
					children.value = []
					childrenC.value = []
				}
			}
			ui.hideLoading()
		})
	}
	function toRecipeSearch() {
		router.push("/pages/index/recipeSearch");
	}
	function showChildrenC(item, index) {
		activeB.value = index
		if (list.value[active.value].children[activeB.value].children) {
			childrenC.value = list.value[active.value].children[activeB.value].children
		} else {
			childrenC.value = []
		}

		viewB.value = `group-${index}`;
		viewC.value = 'group-0'
	}
	function toView(index) {
		active.value = index;
		activeB.value = 0
		if (list.value[index].children) {
			children.value = list.value[index].children
			if (list.value[active.value].children[activeB.value].children) {
				childrenC.value = list.value[active.value].children[activeB.value].children
			} else {
				childrenC.value = []
			}
		} else {
			children.value = []
			childrenC.value = []
		}
		view.value = `group-${index}`;
		viewB.value = 'group-0'
	}
	function toInfo(item, index) {
		if (item.children) {
			return
		}
		router.push("/pages/index/recipeInfo?id=" + item.id);
		activeC.value = index
	}
	onReady(() => {
		getList()
		let _sysInfo = uni.getSystemInfoSync()
		safeAreaInsets.value = _sysInfo.safeAreaInsets.bottom
	});
</script>

<style lang="scss" scoped>
	.recipe-search {
		background: #fff;
		padding: 20rpx;
	}

	.recipe {
		display: flex;
		// height: calc(100vh - 120rpx);
		height: 100vh;
		flex-direction: column;
		justify-content: space-between;
	}

	.page-category {
		display: flex;
		flex: 1;
		overflow: hidden;

		.scroller {
			height: 100%;
		}

		.menu-a {
			width: 260rpx;
			flex-shrink: 0;
			border-radius: 0 20rpx 0 0;
			overflow: hidden;

			.scroller {
				display: flex;
				flex-direction: column;

				::v-deep.uni-scroll-view-content {
					flex: 1;
					display: flex;
					flex-direction: column;
				}
			}

			.item {
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				padding: 30rpx 10rpx;
				font-size: 30rpx;
				position: relative;
				color: #999;
				background-color: #f7f7f7;

				&.is-active {
					background-color: #fff;
					color: #000;

					&::after {
						content: "";
						height: 34rpx;
						width: 6rpx;
						background-color: $cl-color-imagePlayer-primary;
						border-radius: 0 50% 50% 0;
						position: absolute;
						left: 0;
						top: calc(50% - 17rpx);
					}

					&+.flex1 {
						border-top-right-radius: 20rpx;
					}
				}

				&.is-prev {
					border-bottom-right-radius: 20rpx;
				}

				&.is-next {
					border-top-right-radius: 20rpx;
				}
			}

			.flex1 {
				background-color: #f7f7f7;
				flex: 1;
			}
		}

		.menu-border {
			border-right: 1px solid $cl-border-color;
		}

		.group-activeB {
			color: $cl-color-imagePlayer-primary !important;
			font-weight: 700;
		}

		.menu-b {
			flex: 1;
			height: 100%;
			padding: 20rpx;
			box-sizing: border-box;

			.group-empty {
				display: flex;
				align-items: center;
				height: 100%;
				box-sizing: border-box;
				justify-content: center;
			}

			.group {
				.label {
					padding: 0 30rpx;
				}

				.list {
					.item {
						font-size: 26rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						padding: 10rpx;
						margin-bottom: 40rpx;

						.icon {
							height: 120rpx;
							width: 120rpx;
							margin-bottom: 10rpx;
							border-radius: 10rpx;
						}
					}
				}
			}
		}
	}
</style>